<template>
  <div class="container">
    <div class="container-content">
      <el-row :gutter="10">
        <el-col :span="5">
          <div class="card-container">
            <el-card :body-style="{ padding: '5px' }" shadow="never">
              <template #header>
                <span class="card-title">角色分类</span>
              </template>
              <div class="card-content-full">
                <el-tree
                  ref="roleTreeRef"
                  accordion
                  :check-strictly="true"
                  class="custom-tree"
                  :data="treeOptions.dataList"
                  highlight-current
                  node-key="id"
                  :props="treeOptions.props"
                  :show-checkbox="false"
                  @node-click="handleNodeClick"
                />
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="19">
          <vab-query-form>
            <vab-query-form-top-panel>
              <el-form
                :inline="true"
                label-width="80px"
                :model="tableOptions.queryForm"
              >
                <el-form-item label="角色编码">
                  <el-input
                    v-model="tableOptions.queryForm.roleCode"
                    placeholder="角色编码"
                  />
                </el-form-item>
                <el-form-item label="角色名称">
                  <el-input
                    v-model="tableOptions.queryForm.roleName"
                    placeholder="角色名称"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button
                    icon="refresh-left"
                    type="warning"
                    @click="handleResetQuery"
                  >
                    重置
                  </el-button>
                  <el-button
                    icon="Search"
                    type="primary"
                    @click="queryTableData"
                  >
                    查询
                  </el-button>
                </el-form-item>
              </el-form>
            </vab-query-form-top-panel>
            <vab-query-form-left-panel :span="24">
              <el-button
                v-auth="['role/xz']"
                icon="circle-plus"
                type="primary"
                @click="handleRoleAdd"
              >
                添加
              </el-button>
              <el-button
                v-auth="['role/sc']"
                icon="remove"
                type="danger"
                @click="handleRoleDelete"
              >
                批量删除
              </el-button>
            </vab-query-form-left-panel>
          </vab-query-form>
          <el-table
            ref="roleTableRef"
            v-loading="tableOptions.loading"
            border
            stripe
            :data="tableOptions.dataList"
            :height="tableOptions.height"
            :cell-style="tableStyle.cellStyle"
            :header-cell-style="tableStyle.headerCellStyle"
            @sort-change="handleSortChange"
            @selection-change="handleSelectionChange"
            @row-click="handleRowClick"
          >
            <el-table-column
              align="center"
              show-overflow-tooltip
              type="selection"
              width="60"
            />
            <el-table-column label="序号" type="index" width="60">
              <template #default="{ $index }">
                {{ $index + 1 }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="角色编码"
              prop="roleCode"
              width="120"
            />
            <el-table-column
              align="center"
              label="角色名称"
              prop="roleName"
              width="120"
            />
            <el-table-column
              align="center"
              label="排序号"
              prop="orderId"
              width="70"
            />
            <el-table-column
              align="center"
              label="角色类别"
              prop="roleTypeName"
              width="140"
            />
            <el-table-column
              align="center"
              label="备注"
              prop="remark"
              show-overflow-tooltip
              width="140"
            />
            <el-table-column
              align="center"
              label="创建人"
              prop="createUserName"
              width="80"
            />
            <el-table-column
              align="center"
              :formatter="datetimeFormat"
              label="创建时间"
              prop="createTime"
              width="160"
            />
            <el-table-column
              align="center"
              border
              fixed="right"
              label="操作"
              width="240"
            >
              <template #default="{ row }">
                <el-button
                  v-auth="['role/cdqx']"
                  size="small"
                  type="primary"
                  @click="handleRoleMenu(row)"
                >
                  菜单权限
                </el-button>
                <el-button
                  v-auth="['role/zyqx']"
                  size="small"
                  type="success"
                  @click="handleViewRoleResource(row)"
                >
                  资源权限
                </el-button>
                <el-button
                  v-auth="['role/xg']"
                  size="small"
                  type="warning"
                  @click="handleRoleEdit(row)"
                >
                  编辑
                </el-button>
                <el-button
                  v-auth="['role/sc']"
                  size="small"
                  type="danger"
                  @click="handleRoleDelete(row)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            :current-page="tableOptions.pagination.current"
            :layout="tableOptions.pagination.layout"
            :page-size="tableOptions.pagination.size"
            :total="tableOptions.pagination.total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </el-col>
      </el-row>
      <RoleEdit ref="roleEditRef" width="50%" @confirm="queryTableData" />
      <RoleMenu ref="roleMenuRef" @confirm="handleRoleMenuConfirm" />
      <RoleResource ref="roleResourceRef" />
    </div>
  </div>
</template>
<script setup name="Role">
import { useMessage, useMessageBox } from "@/hooks/message";
import { queryRoleTable, deleteRole } from "@/api/admin/org/role/";
import { querySystemTreeNode } from "@/api/admin/system/systemtree";
import { datetimeFormat } from "@/utils/common";
import RoleEdit from "./components/roleEdit.vue";
import RoleMenu from "./components/roleMenu.vue";
import RoleResource from "./components/roleResource.vue";
import { useTable } from "@/hooks/table";
import { useTree } from "@/hooks/tree";

const roleTableRef = ref(null);
const roleTreeRef = ref(null);
const roleEditRef = ref(null);
const roleMenuRef = ref(null);
const roleResourceRef = ref(null);

const tableOptions = reactive({
  autoLoad: true,
  queryForm: {
    roleTypeCode: "ALL",
    roleCode: "",
    roleName: ""
  },
  queryFunction: queryRoleTable,
  descs: ["create_time"]
});

const {
  tableStyle,
  queryTableData,
  handleSelectionChange,
  handleResetQuery,
  handleRowClick,
  handleSizeChange,
  handleCurrentChange,
  handleSortChange
} = useTable(tableOptions, roleTableRef);

const treeOptions = reactive({
  queryForm: { treeCode: "role" },
  props: {
    children: "children",
    label: "text"
  },
  queryFunction: querySystemTreeNode
});

const { queryTreeData } = useTree(treeOptions);

onMounted(() => {
  queryTreeData();
});

const handleNodeClick = data => {
  if (data.nodeCode) {
    tableOptions.queryForm.roleTypeCode = data.nodeCode;
  }
  queryTableData();
};

const handleRoleDelete = row => {
  let ids;
  if (row && row.id) {
    ids = row.id;
  } else {
    if (tableOptions.dataSelections.length > 0) {
      ids = tableOptions.dataSelections.map(item => item.id).join();
    } else {
      useMessage().warning("未选中任何行");
    }
  }
  useMessageBox()
    .confirm("删除的角色将无法恢复，是否继续")
    .then(async () => {
      const { code, msg } = await deleteRole(ids);
      if (code && code === 200) {
        useMessage().success(msg);
        await queryTableData();
      } else {
        useMessage().warning(msg);
      }
    });
};

const handleRoleEdit = row => {
  if (row) {
    roleEditRef.value.show(row);
  } else {
    useMessage().warning("未选中任何角色");
  }
};

const handleRoleAdd = () => {
  roleEditRef.value.show();
};

const handleRoleMenu = row => {
  roleMenuRef.value.show(row.id);
};

const handleViewRoleResource = row => {
  roleResourceRef.value.show(row.id);
};

const handleRoleMenuConfirm = () => {};
</script>

<style lang="scss" scoped>
.custom-tree-node {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  padding-right: 8px;
  font-size: 14px;
}
</style>
